study-builder/FDA HTML/active-task-new-screen-4.html (284 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<!-- Basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FDA</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="#" type="image/x-icon" />
<link rel="apple-touch-icon" href="#">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/boostrap/bootstrap.min.css">
<link rel="stylesheet" href="vendor/datatable/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="vendor/dragula/dragula.min.css">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="vendor/font-awesome/font-awesome.min.css">
<link rel="stylesheet" href="vendor/select2/bootstrap-select.min.css">
<link rel="stylesheet" href="vendor/animation/animate.css">
<!-- Theme Responsive CSS -->
<link rel="stylesheet" href="css/sprites_icon.css">
<link rel="stylesheet" href="css/sprites_v3.css">
<link rel="stylesheet" href="css/layout.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/style.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>
<style>
.bullets:before {
font-family: 'FontAwesome';
content: '\f111';
font-size: 9px;
margin: 0 15px 0 1px;
vertical-align: middle;
color: #afadad;
}
.black-md-f {
font-weight: 500;
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-none white-bg hd_con">
<div class="md-container">
<!-- Navigation Menu-->
<nav class="navbar navbar-inverse">
<div class="container-fluid p-none">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo-sm.png"/></a>
</div>
<div class="collapse navbar-collapse p-none" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Studies</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">repository <span><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
<ul class="dropdown-menu">
<li><a href="#">Reference Tables</a></li>
<li><a href="#">QA content</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Gateway app level content</a></li>
<li><a href="#">Legal Text</a></li>
</ul>
</li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Users</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Samuel Johnson <span><i class="fa fa-angle-down" aria-hidden="true"></i></span></a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-none mt-lg">
<div class="md-container white-bg">
<div class="row lc-gray-bg">
<!-- Start left Content here -->
<div class="col-sm-2 col-lc p-none">
<div class="left-content-container wid100">
<ul>
<li>Create Study</li>
<li class="active">1. Basic Information</li>
<li>2. Settings and Admins</li>
<li>3. Overview</li>
<li>4. Eligibility</li>
<li>5. Consent</li>
<li>6. Study Exercises</li>
<li>7. Study Dashboard</li>
<li>8. Miscellaneous</li>
<li>9. Checklist</li>
<li>10. Actions</li>
</ul>
</div>
</div>
<!-- End left Content here -->
<!-- Start right Content here -->
<div class="col-sm-10 col-rc white-bg p-none">
<!-- Start top tab section-->
<div class="right-content-head">
<div class="text-right">
<div class="black-md-f dis-line pull-left line34">
<span class="mr-sm"><a href="#"><img src="images/icons/back-b.png"/></a></span> Add Active Task
</div>
<div class="dis-line form-group mb-none mr-sm">
<button type="button" class="btn btn-default gray-btn">Cancel</button>
</div>
<div class="dis-line form-group mb-none mr-sm">
<button type="button" class="btn btn-default gray-btn">Save</button>
</div>
<div class="dis-line form-group mb-none">
<button type="button" class="btn btn-primary blue-btn">Done</button>
</div>
</div>
</div>
<!-- End top tab section-->
<!-- Start body tab section -->
<div class="right-content-body pt-none pl-none pr-none">
<ul class="nav nav-tabs review-tabs gray-bg">
<li class="active"><a data-toggle="tab" href="#sla">Content</a></li>
<li><a data-toggle="tab" href="#qla">Schedule</a></li>
</ul>
<div class="tab-content pl-xlg pr-xlg">
<!-- Step-level Attributes-->
<div id="sla" class="tab-pane fade in active mt-xlg">
<div class="row">
<div class="col-md-12 pl-none">
<div class="blue-md-f mb-md text-uppercase">
Select Active Task
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-lg-3 p-none">
<div class="gray-xs-f mb-xs">Choose from a list of pre-defined active tasks
</div>
<div class="form-group mb-none">
<select id="dp" class="selectpicker" title="Select" required>
<option> Practice test for heart rate measurement</option>
<option> X-minute walk test</option>
<option selected>X-minute run test</option>
<option>X-minute step test</option>
</select>
<div class="help-block with-errors red-txt"></div>
</div>
</div>
<div class="col-md-12 col-lg-12 p-none">
<div class="form-group " style="margin-top: -15px;"><i> This task measures the recovery heart rate to estimate one's fitness level.
The recovery heart rate is a pulse measurement that is taken immediately following a bout of modarately intense to very intense exercise.
it represents the heart's ability to recover from exercise.</i></div>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-lg-3 p-none">
<div class="gray-xs-f mb-xs">Activity Short Title or Key (50 characters max) <span class="requiredStar"> *
</span> <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="" data-original-title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div>
<div class="form-group mb-none">
<input type="text" class="form-control">
<div class="help-block with-errors red-txt"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-lg-3 p-none">
<div class="gray-xs-f mb-xs">Display name (150 characters max) <span class="requiredStar"> *
</span> <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="" data-original-title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div>
<div class="form-group mb-none">
<input type="text" class="form-control">
<div class="help-block with-errors red-txt"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="blue-md-f mb-md text-uppercase">
Configurable Parameters
</div>
<div class="col-md-4 col-lg-3">
<div class="gray-xs-f mb-xs">Length of walk period in minutes <span class="requiredStar"> *
</span> <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="" data-original-title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div>
<div class="form-group mb-none">
<input type="num" class="form-control" placeholder="min">
<div class="help-block with-errors red-txt"></div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="gray-xs-f mb-xs">Length of rest period in minutes <span class="requiredStar"> *
</span> <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="" data-original-title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div>
<div class="form-group mb-none">
<input type="num" class="form-control" placeholder="min">
<div class="help-block with-errors red-txt"></div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="gray-xs-f mb-xs">Audio prompt interval in minutes <span class="requiredStar"> *
</span> <span class="ml-xs sprites_v3 filled-tooltip" data-toggle="tooltip" title="" data-original-title="The Tooltip plugin is small pop-up box that appears when the user moves."></span></div>
<div class="form-group mb-none">
<select id="dp" class="selectpicker" title="Select" required>
<option> Select</option>
<option>Step 4: DosageQuestion</option>
<option>Step 4: DosageQuestion</option>
</select>
<div class="help-block with-errors red-txt"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="blue-md-f mb-md text-uppercase">
Results capured from the task
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="bullets bor-b-2-gray black-md-f pt-md pb-md">Heart rate at end of exercise</div>
<div class="bullets bor-b-2-gray black-md-f pt-md pb-md">Heart rate after recovery</div>
<div class="bullets black-md-f black-md-f pt-md"> Recovery heart rate</div>
<div class="pl-xlg ml-xs bor-l-1-gray mt-lg">
<div class="mt-xs mb-sm">
<span class="checkbox checkbox-inline"><input type="checkbox" id="number_of_moves_tower_stat_id" name="taskAttributeValueBos[1].useForStatistic" value="false">
<label for="number_of_moves_tower_stat_id">Use
for dashboard statistic</label>
</span>
</div>
<div class="mt-xs mb-sm">
<span class="checkbox checkbox-inline"><input type="checkbox" id="number_of_moves_tower_stat_id" name="taskAttributeValueBos[1].useForStatistic" value="false">
<label for="number_of_moves_tower_stat_id">Use
for dashboard Chart</label>
</span>
</div>
</div>
<div class="bullets bor-b-2-gray black-md-f pt-md pb-md">Ongoing heart rate data capture (during walk recovery)</div>
<div class="bullets bor-b-2-gray black-md-f pt-md pb-md">V02 max</div>
<div class="bullets bor-b-2-gray black-md-f pt-md pb-md">Accelerometery data</div>
<div class="bullets bor-b-2-gray black-md-f pt-md pb-md">Pedometer data</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="mt-md">
Note: Data from Apple Watch is also collected, if available</div>
</div>
</div>
<!--- Form-level Attributes --->
<div id="qla" class="tab-pane fade mt-xlg">
<div class="col-md-10 p-none">
<div class="gray-xs-f mb-xs">Text of the question</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Type the question you wish to ask the participant" />
<div class="help-block with-errors red-txt"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End right Content here -->
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- Start Footer-->
<div class="md-container ft_con">
<div class="foot">
<span>Copyright © 2016 FDA</span><span><a href="#">Terms</a></span><span><a href="#">Privacy Policy</a></span>
</div>
</div>
<!-- End Footer-->
<!-- Vendor -->
<script src="vendor/jquery/jquery-3.1.1.min.js"></script>
<script src="vendor/boostrap/bootstrap.min.js"></script>
<script src="vendor/animation/wow.min.js"></script>
<script src="vendor/datatable/js/jquery.dataTables.min.js"></script>
<script src="vendor/select2/bootstrap-select.min.js"></script>
<script src="vendor/dragula/react-dragula.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="vendor/tinymce/tinymce.min.js"></script>
<!-- Theme Custom JS-->
<script src="js/theme.js"></script>
<script src="js/common.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var a = $(".col-lc").height();
var b = $(".col-rc").height();
if(a > b){
$(".col-rc").css("height", a);
}else{
$(".col-rc").css("height", "auto");
}
});
});
</script>
</body>
</html>